<template>
  <div class="home">
    <ScrollData
        ref="scroll"
        v-show="!isOpenTimers"
        :style="scrollStyle"
        :item-style="itemStyle"
        :show-params="showParams"
        :data-array="dataArray"
        :total-pages="totalPages"
        :bottom-text="bottomText"
        :viewport-height="viewportHeight"
        :showing="showing"
        @clickNode="clickNode"
        @nextPage="nextPage"
    />

    <ScrollLading
        class="lading"
        v-show="isOpenTimers"
        :style="loadingStyle"
        :viewport-height="viewportHeight"
        :ladingText="ladingText"
    />
  </div>
</template>

<script>
/**
 * loadingStyle 加载中的样式
 * scrollStyle 主要内容的样式
 * showParams 展示的字段名
 * dataArray 数据
 * totalPages 总页数
 * bottomText 底部提示文字
 * clickNode 点击节点的事件
 * nextPage 加载下一页的事件
 * itemStyle 每一项的定制样式
 * ladingText 加载中的文字
 */


import ScrollData from "@/components/JxSrcoll/ScrollData.vue"
import ScrollLading from "@/components/JxSrcoll/loading.vue"

export default {
  name: "InletCom",
  components: {
    ScrollData,
    ScrollLading
  },
  props: {
    scrollStyle: {
      type: Object,
    },
    itemStyle: {
      type: Object,
    },
    loadingStyle: {
      type: Object,
    },
    ladingText: {
      type: String,
      default: '加载中。。。'
    },
    showParams: {
      type: String,
    },
    dataArray: {
      type: Array
    },
    totalPages: { // 总页数
      type: Number,
    },
    bottomText: {
      type: String,
      default: '下面没有啦。。。'
    },
    showing:{
      type:Array
    }
  },

  data() {
    return {
      isOpenTimers: false,
      viewportHeight: 0 // 当前视口高度
    }
  },
  watch:{
    viewportHeight(NewVal){
      this.$emit('changeHeight',NewVal)
    }
  },
  mounted() {
    // 页面加载时获取视口高度
    this.updateViewportHeight();
    // 添加监听器，监听窗口大小变化
    window.addEventListener('resize', this.updateViewportHeight);
  },

  methods: {
    clickNode(item) {
      this.$emit('clickNode', item)
    },
    nextPage(pageNam) {
      this.$emit('nextPage', pageNam)
    },
    updateViewportHeight() {
      this.viewportHeight = window.innerHeight;
    }
  },

  beforeDestroy() { // 组件销毁前移除监听器
    window.removeEventListener('resize', this.updateViewportHeight);
  }
}
</script>

<style>
.home {
  width: 100%;
}
</style>